<template>
  <div
    style="text-align: left; padding: 12px 12px 15px; border-bottom: 1px solid var(--el-color-primary-light-7); margin-bottom: 20px;">
    <el-button type="primary" :icon="Plus" />
    <el-button type="danger" :icon="Delete" />
  </div>
  <el-table :data="tableData" highlight-current-row style="width: 100%">
    <el-table-column type="selection" width="50" />
    <el-table-column fixed prop="installDir" label="安装目录" width="180" />
    <el-table-column label="版本信息" width="160">
      <template #default="scope">
        <div>{{ scope.row.version}}-{{ scope.row.versionType }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="installMode" label="安装模式" width="120">
      <template #default="scope">
        <el-tag v-if="scope.row.installMode == '2'" type="success">高可用</el-tag>
        <el-tag v-else type="danger">单机</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="installNodes" label="安装节点" width="160" />
    <el-table-column prop="portal" label="访问地址" width="220" />
    <el-table-column prop="dbhost" label="数据库主机" width="160" />
    <el-table-column prop="dbuser" label="数据库用户" width="120" />
    <el-table-column prop="dbport" label="数据库端口" width="120" />
    <el-table-column fixed="right" label="操作" min-width="160">
      <template #default="scope">
        <el-button v-if="scope.row.installNodes.indexOf(' ') < 0" link type="primary" size="small" @click="handleClick">
          切换到高可用
        </el-button>
        <div></div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Plus, Delete, Link, Key } from '@element-plus/icons-vue'

const handleClick = () => {
  console.log('click')
}

interface Installer {
  installNodes: string
  version: string
  versionType: string
  patchset: any
  installDir: string
  installMode: string
  portal: string
  dbhost: string
  dbuser: string
  dbport: string
}

const tableData: Installer[] = [
  {
    installNodes: '192.168.30.11 192.168.30.12',
    version: '4.3.2.1',
    versionType: 'Lite',
    patchset: ['4.2.0', '4.3.1', '4.3.2', '4.3.2.1'],
    installMode: '2',
    installDir: '/data/dataxone',
    portal: 'http://192.168.30.11:8080/DSGWEB/#login',
    dbhost: "192.168.30.100",
    dbuser: 'dataxone',
    dbport: "3306",
  },
  {
    installNodes: '192.168.30.13',
    version: '4.2.0',
    versionType: 'Standard',
    patchset: [],
    installMode: '1',
    installDir: '/data/dataxone',
    portal: 'http://192.168.30.13:8080/DSGWEB/#login',
    dbhost: "192.168.30.100",
    dbuser: 'dataxone',
    dbport: "3306",
  }
];

// const selectable = (row: Installer) => row.installNodes.indexOf(" ") > 0

</script>
